<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>我的勋章 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #10b981;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 勋章统计卡片 */
    .badge-stats {
      background-color: white;
      border-radius: 16px;
      padding: 20px 15px;
      margin: 15px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }
    
    .stats-grid {
      display: flex;
      justify-content: space-around;
      text-align: center;
    }
    
    .stat-item {
      flex: 1;
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #10b981;
      margin-bottom: 5px;
    }
    
    .stat-label {
      font-size: 13px;
      color: #666;
    }
    
    /* 内容导航 */
    .content-tabs {
      display: flex;
      background-color: white;
      margin: 0 15px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .content-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .tab-item {
      padding: 12px 20px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      white-space: nowrap;
    }
    
    .tab-item.active {
      color: #10b981;
      position: relative;
    }
    
    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: #10b981;
      border-radius: 3px 3px 0 0;
    }
    
    /* 内容区域 */
    .tab-content {
      display: none;
    }
    
    .tab-content.active {
      display: block;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 15px 5px;
    }
    
    .section-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
    }
    
    .section-count {
      font-size: 13px;
      color: #999;
    }
    
    /* 勋章网格布局 */
    .badges-grid {
      padding: 10px 15px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    
    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      border-radius: 12px;
      padding: 15px 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s;
    }
    
    .badge-item:hover {
      transform: translateY(-3px);
    }
    
    .badge-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      font-size: 24px;
      position: relative;
      overflow: hidden;
    }
    
    .badge-icon.unlocked {
      background: linear-gradient(135deg, #10b981, #34d399);
      color: white;
    }
    
    .badge-icon.locked {
      background-color: #f3f4f6;
      color: #d1d5db;
    }
    
    .badge-icon.locked::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af' opacity='0.3'%3E%3Cpath d='M12 15a3 3 0 100-6 3 3 0 000 6z'/%3E%3Cpath fill-rule='evenodd' d='M1.323 11.447C2.811 6.976 7.028 4.06 12.001 4c4.97 0 9.185 2.977 10.675 7.447.12.362.12.752 0 1.113C21.187 17.024 16.97 20.039 12.001 20c-4.97 0-9.186-2.976-10.675-7.447-.12-.362-.12-.752 0-1.113zM17.23 16c1.554-2.673 1.75-6.035.747-8.96l-1.523.886c.781 1.875.666 4.022-.552 5.684l1.328 2.09z' clip-rule='evenodd'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .badge-name {
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 3px;
      color: #333;
    }
    
    .badge-locked .badge-name {
      color: #999;
    }
    
    .badge-desc {
      font-size: 11px;
      color: #666;
      text-align: center;
      margin-bottom: 8px;
    }
    
    .badge-locked .badge-desc {
      color: #ccc;
    }
    
    .badge-progress {
      width: 100%;
      height: 4px;
      background-color: #f1f5f9;
      border-radius: 2px;
      overflow: hidden;
    }
    
    .badge-progress-bar {
      height: 100%;
      background-color: #10b981;
      border-radius: 2px;
    }
    
    .badge-locked .badge-progress-bar {
      background-color: #e2e8f0;
    }
    
    .progress-text {
      font-size: 10px;
      color: #999;
      margin-top: 5px;
    }
    
    /* 勋章详情样式 */
    .badge-detail-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }
    
    .badge-detail-modal.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 16px;
      width: 90%;
      max-width: 400px;
      max-height: 80vh;
      overflow-y: auto;
      transform: translateY(20px);
      transition: transform 0.3s;
    }
    
    .badge-detail-modal.active .modal-content {
      transform: translateY(0);
    }
    
    .modal-header {
      padding: 20px;
      text-align: center;
      position: relative;
    }
    
    .close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      font-size: 20px;
      color: #999;
      cursor: pointer;
    }
    
    .detail-badge-icon {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }
    
    .detail-badge-name {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .detail-badge-category {
      display: inline-block;
      background-color: #f1f5f9;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 12px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .modal-body {
      padding: 0 20px 20px;
    }
    
    .badge-description {
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 20px;
      color: #555;
    }
    
    .badge-requirements {
      background-color: #f8fafc;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 20px;
    }
    
    .requirements-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .requirement-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;
      font-size: 14px;
    }
    
    .requirement-item:last-child {
      margin-bottom: 0;
    }
    
    .requirement-check {
      min-width: 18px;
      margin-right: 10px;
      margin-top: 3px;
      color: #10b981;
    }
    
    .requirement-check.unchecked {
      color: #ccc;
    }
    
    .badge-rewards {
      margin-bottom: 15px;
    }
    
    .rewards-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .reward-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background-color: #f0fdf4;
      padding: 10px 12px;
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      color: #065f46;
    }
    
    .earned-date {
      text-align: center;
      font-size: 13px;
      color: #666;
      padding: 10px;
      background-color: #f8fafc;
      border-radius: 8px;
    }
    
    /* 成就时间线 */
    .achievements-timeline {
      padding: 0 15px 15px;
    }
    
    .timeline-item {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .timeline-item:last-child {
      border-bottom: none;
    }
    
    .timeline-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 15px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      background: linear-gradient(135deg, #10b981, #34d399);
      color: white;
    }
    
    .timeline-content {
      flex: 1;
    }
    
    .timeline-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 3px;
    }
    
    .timeline-desc {
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;
    }
    
    .timeline-date {
      font-size: 12px;
      color: #999;
    }
    
    /* 徽章排行榜 */
    .ranking-list {
      padding: 0 15px 15px;
    }
    
    .ranking-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      background-color: white;
      border-radius: 12px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .ranking-position {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-color: #f1f5f9;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      margin-right: 15px;
    }
    
    .ranking-position.top1 {
      background-color: #fbbf24;
      color: white;
    }
    
    .ranking-position.top2 {
      background-color: #94a3b8;
      color: white;
    }
    
    .ranking-position.top3 {
      background-color: #ea580c;
      color: white;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      flex: 1;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
      object-fit: cover;
    }
    
    .user-details {
      flex: 1;
    }
    
    .user-name {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .user-badges {
      font-size: 12px;
      color: #666;
    }
    
    .ranking-score {
      font-size: 15px;
      font-weight: 600;
      color: #10b981;
    }
    
    .ranking-item.current-user {
      border: 2px solid #10b981;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #10b981;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 60px 20px;
      text-align: center;
      color: #999;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 15px;
      color: #ddd;
    }
    
    .empty-text {
      font-size: 16px;
      margin-bottom: 20px;
    }
    
    .btn-primary {
      background-color: #10b981;
      border-color: #10b981;
      color: white;
      padding: 8px 24px;
      border-radius: 20px;
      font-weight: 500;
    }
    
    .btn-primary:hover {
      background-color: #059669;
      border-color: #059669;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">我的勋章</h1>
    <div class="text-white">
      <i class="fa fa-share-alt"></i>
    </div>
  </div>
  
  <!-- 勋章统计卡片 -->
  <div class="badge-stats">
    <div class="stats-grid">
      <div class="stat-item">
        <div class="stat-value">12</div>
        <div class="stat-label">已获得</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">38</div>
        <div class="stat-label">总计勋章</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">32%</div>
        <div class="stat-label">收集率</div>
      </div>
    </div>
  </div>
  
  <!-- 内容导航 -->
  <div class="content-tabs">
    <div class="tab-item active" data-tab="all">全部勋章</div>
    <div class="tab-item" data-tab="earned">已获得</div>
    <div class="tab-item" data-tab="progress">进行中</div>
    <div class="tab-item" data-tab="achievements">获得记录</div>
    <div class="tab-item" data-tab="ranking">勋章排行</div>
  </div>
  
  <!-- 全部勋章 -->
  <div class="tab-content active" id="all">
    <div class="section-header">
      <div class="section-title">全部勋章</div>
      <div class="section-count">38个勋章</div>
    </div>
    
    <div class="badges-grid">
      <!-- 已获得勋章 -->
      <div class="badge-item" data-badge="novice">
        <div class="badge-icon unlocked">
          <i class="fa fa-user"></i>
        </div>
        <div class="badge-name">新手入门</div>
        <div class="badge-desc">完成账号注册</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="content-creator">
        <div class="badge-icon unlocked">
          <i class="fa fa-pencil"></i>
        </div>
        <div class="badge-name">内容创作者</div>
        <div class="badge-desc">发布10条原创内容</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="social-butterfly">
        <div class="badge-icon unlocked">
          <i class="fa fa-comments"></i>
        </div>
        <div class="badge-name">社交达人</div>
        <div class="badge-desc">获得50个粉丝</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <!-- 进行中勋章 -->
      <div class="badge-item" data-badge="photographer">
        <div class="badge-icon locked">
          <i class="fa fa-camera"></i>
        </div>
        <div class="badge-name">摄影爱好者</div>
        <div class="badge-desc">发布5张原创照片</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 60%"></div>
        </div>
        <div class="progress-text">3/5 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="popular">
        <div class="badge-icon locked">
          <i class="fa fa-star"></i>
        </div>
        <div class="badge-name">人气之星</div>
        <div class="badge-desc">单条内容获100赞</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 75%"></div>
        </div>
        <div class="progress-text">75/100 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="active">
        <div class="badge-icon locked">
          <i class="fa fa-fire"></i>
        </div>
        <div class="badge-name">活跃分子</div>
        <div class="badge-desc">连续登录15天</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 60%"></div>
        </div>
        <div class="progress-text">9/15 进行中</div>
      </div>
      
      <!-- 未开始勋章 -->
      <div class="badge-item badge-locked" data-badge="writer">
        <div class="badge-icon locked">
          <i class="fa fa-book"></i>
        </div>
        <div class="badge-name">专栏作家</div>
        <div class="badge-desc">发布5篇长文内容</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 0%"></div>
        </div>
      </div>
      
      <div class="badge-item badge-locked" data-badge="streamer">
        <div class="badge-icon locked">
          <i class="fa fa-video-camera"></i>
        </div>
        <div class="badge-name">直播达人</div>
        <div class="badge-desc">完成3次直播</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 0%"></div>
        </div>
      </div>
      
      <div class="badge-item badge-locked" data-badge="organizer">
        <div class="badge-icon locked">
          <i class="fa fa-users"></i>
        </div>
        <div class="badge-name">社群组织者</div>
        <div class="badge-desc">创建并管理兴趣小组</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 0%"></div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 已获得勋章 -->
  <div class="tab-content" id="earned">
    <div class="section-header">
      <div class="section-title">已获得勋章</div>
      <div class="section-count">12个勋章</div>
    </div>
    
    <div class="badges-grid">
      <div class="badge-item" data-badge="novice">
        <div class="badge-icon unlocked">
          <i class="fa fa-user"></i>
        </div>
        <div class="badge-name">新手入门</div>
        <div class="badge-desc">完成账号注册</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="content-creator">
        <div class="badge-icon unlocked">
          <i class="fa fa-pencil"></i>
        </div>
        <div class="badge-name">内容创作者</div>
        <div class="badge-desc">发布10条原创内容</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="social-butterfly">
        <div class="badge-icon unlocked">
          <i class="fa fa-comments"></i>
        </div>
        <div class="badge-name">社交达人</div>
        <div class="badge-desc">获得50个粉丝</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="explorer">
        <div class="badge-icon unlocked">
          <i class="fa fa-compass"></i>
        </div>
        <div class="badge-name">探索家</div>
        <div class="badge-desc">浏览100个不同内容</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="collector">
        <div class="badge-icon unlocked">
          <i class="fa fa-bookmark"></i>
        </div>
        <div class="badge-name">收藏爱好者</div>
        <div class="badge-desc">收藏30个感兴趣内容</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
      
      <div class="badge-item" data-badge="first-post">
        <div class="badge-icon unlocked">
          <i class="fa fa-flag"></i>
        </div>
        <div class="badge-name">首发贡献</div>
        <div class="badge-desc">发布第一条动态</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 100%"></div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 进行中勋章 -->
  <div class="tab-content" id="progress">
    <div class="section-header">
      <div class="section-title">进行中勋章</div>
      <div class="section-count">8个勋章</div>
    </div>
    
    <div class="badges-grid">
      <div class="badge-item" data-badge="photographer">
        <div class="badge-icon locked">
          <i class="fa fa-camera"></i>
        </div>
        <div class="badge-name">摄影爱好者</div>
        <div class="badge-desc">发布5张原创照片</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 60%"></div>
        </div>
        <div class="progress-text">3/5 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="popular">
        <div class="badge-icon locked">
          <i class="fa fa-star"></i>
        </div>
        <div class="badge-name">人气之星</div>
        <div class="badge-desc">单条内容获100赞</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 75%"></div>
        </div>
        <div class="progress-text">75/100 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="active">
        <div class="badge-icon locked">
          <i class="fa fa-fire"></i>
        </div>
        <div class="badge-name">活跃分子</div>
        <div class="badge-desc">连续登录15天</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 60%"></div>
        </div>
        <div class="progress-text">9/15 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="commentator">
        <div class="badge-icon locked">
          <i class="fa fa-reply"></i>
        </div>
        <div class="badge-name">评论专家</div>
        <div class="badge-desc">发表50条优质评论</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 48%"></div>
        </div>
        <div class="progress-text">24/50 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="sharer">
        <div class="badge-icon locked">
          <i class="fa fa-share"></i>
        </div>
        <div class="badge-name">分享达人</div>
        <div class="badge-desc">分享20条内容到外部</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 65%"></div>
        </div>
        <div class="progress-text">13/20 进行中</div>
      </div>
      
      <div class="badge-item" data-badge="challenger">
        <div class="badge-icon locked">
          <i class="fa fa-trophy"></i>
        </div>
        <div class="badge-name">活动挑战者</div>
        <div class="badge-desc">参与3次平台活动</div>
        <div class="badge-progress">
          <div class="badge-progress-bar" style="width: 66%"></div>
        </div>
        <div class="progress-text">2/3 进行中</div>
      </div>
    </div>
  </div>
  
  <!-- 获得记录 -->
  <div class="tab-content" id="achievements">
    <div class="section-header">
      <div class="section-title">获得记录</div>
      <div class="section-count">最近获得</div>
    </div>
    
    <div class="achievements-timeline">
      <div class="timeline-item">
        <div class="timeline-icon">
          <i class="fa fa-comments"></i>
        </div>
        <div class="timeline-content">
          <div class="timeline-title">获得"社交达人"勋章</div>
          <div class="timeline-desc">您的粉丝数量达到了50人</div>
          <div class="timeline-date">今天 14:35</div>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-icon">
          <i class="fa fa-pencil"></i>
        </div>
        <div class="timeline-content">
          <div class="timeline-title">获得"内容创作者"勋章</div>
          <div class="timeline-desc">您已发布10条原创内容</div>
          <div class="timeline-date">昨天 09:12</div>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-icon">
          <i class="fa fa-bookmark"></i>
        </div>
        <div class="timeline-content">
          <div class="timeline-title">获得"收藏爱好者"勋章</div>
          <div class="timeline-desc">您已收藏30个感兴趣的内容</div>
          <div class="timeline-date">2023-10-24 20:47</div>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-icon">
          <i class="fa fa-compass"></i>
        </div>
        <div class="timeline-content">
          <div class="timeline-title">获得"探索家"勋章</div>
          <div class="timeline-desc">您已浏览100个不同内容</div>
          <div class="timeline-date">2023-10-22 16:23</div>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-icon">
          <i class="fa fa-calendar-check-o"></i>
        </div>
        <div class="timeline-content">
          <div class="timeline-title">获得"坚持不懈"勋章</div>
          <div class="timeline-desc">您已连续登录7天</div>
          <div class="timeline-date">2023-10-20 08:15</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 勋章排行 -->
  <div class="tab-content" id="ranking">
    <div class="section-header">
      <div class="section-title">勋章排行榜</div>
      <div class="section-count">本周更新</div>
    </div>
    
    <div class="ranking-list">
      <div class="ranking-item">
        <div class="ranking-position top1">1</div>
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <div class="user-name">阳光达人</div>
            <div class="user-badges">32个勋章</div>
          </div>
        </div>
        <div class="ranking-score">9850</div>
      </div>
      
      <div class="ranking-item">
        <div class="ranking-position top2">2</div>
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <div class="user-name">旅行日记</div>
            <div class="user-badges">29个勋章</div>
          </div>
        </div>
        <div class="ranking-score">9240</div>
      </div>
      
      <div class="ranking-item">
        <div class="ranking-position top3">3</div>
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <div class="user-name">美食家</div>
            <div class="user-badges">27个勋章</div>
          </div>
        </div>
        <div class="ranking-score">8760</div>
      </div>
      
      <div class="ranking-item">
        <div class="ranking-position">4</div>
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <div class="user-name">科技前沿</div>
            <div class="user-badges">25个勋章</div>
          </div>
        </div>
        <div class="ranking-score">8120</div>
      </div>
      
      <div class="ranking-item current-user">
        <div class="ranking-position">15</div>
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <div class="user-name">我</div>
            <div class="user-badges">12个勋章</div>
          </div>
        </div>
        <div class="ranking-score">5380</div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-trophy nav-icon"></i>
      <span>勋章</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 勋章详情弹窗 -->
  <div class="badge-detail-modal" id="badgeDetail">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close-modal" id="closeModal">
          <i class="fa fa-times"></i>
        </button>
        <div class="detail-badge-icon unlocked" id="detailBadgeIcon">
          <i class="fa fa-comments"></i>
        </div>
        <div class="detail-badge-name" id="detailBadgeName">社交达人</div>
        <div class="detail-badge-category" id="detailBadgeCategory">社交类</div>
      </div>
      <div class="modal-body">
        <div class="badge-description" id="detailBadgeDesc">
          获得50个粉丝即可解锁此勋章，代表您在社区中具有一定的社交影响力，受到其他用户的关注和喜爱。
        </div>
        
        <div class="badge-requirements">
          <div class="requirements-title">
            <i class="fa fa-check-square-o"></i> 获得条件
          </div>
          <div class="requirement-list" id="detailRequirements">
            <div class="requirement-item">
              <div class="requirement-check">
                <i class="fa fa-check"></i>
              </div>
              <div>累计获得50位粉丝关注</div>
            </div>
          </div>
        </div>
        
        <div class="badge-rewards">
          <div class="rewards-title">
            <i class="fa fa-gift"></i> 勋章奖励
          </div>
          <div class="reward-list" id="detailRewards">
            <div class="reward-item">
              <i class="fa fa-star"></i>
              <div>账号经验值 +200</div>
            </div>
            <div class="reward-item">
              <i class="fa fa-percent"></i>
              <div>内容曝光率提升10%</div>
            </div>
          </div>
        </div>
        
        <div class="earned-date" id="detailEarnedDate">
          获得于: 今天 14:35
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 勋章数据
    const badgeData = {
      "novice": {
        name: "新手入门",
        icon: "fa-user",
        category: "基础类",
        description: "完成账号注册即可获得此勋章，标志着您正式加入我们的社区，开启社交之旅。",
        requirements: [
          {text: "完成账号注册", completed: true}
        ],
        rewards: [
          {icon: "fa-star", text: "账号经验值 +50"},
          {icon: "fa-unlock", text: "基础功能解锁"}
        ],
        earnedDate: "2023-10-01 09:23",
        unlocked: true
      },
      "content-creator": {
        name: "内容创作者",
        icon: "fa-pencil",
        category: "创作类",
        description: "发布10条原创内容即可获得此勋章，表彰您为社区贡献有价值的内容。",
        requirements: [
          {text: "发布10条原创内容", completed: true}
        ],
        rewards: [
          {icon: "fa-star", text: "账号经验值 +500"},
          {icon: "fa-image", text: "高清图片上传权限"}
        ],
        earnedDate: "昨天 09:12",
        unlocked: true
      },
      "social-butterfly": {
        name: "社交达人",
        icon: "fa-comments",
        category: "社交类",
        description: "获得50个粉丝即可解锁此勋章，代表您在社区中具有一定的社交影响力，受到其他用户的关注和喜爱。",
        requirements: [
          {text: "累计获得50位粉丝关注", completed: true}
        ],
        rewards: [
          {icon: "fa-star", text: "账号经验值 +200"},
          {icon: "fa-percent", text: "内容曝光率提升10%"}
        ],
        earnedDate: "今天 14:35",
        unlocked: true
      },
      "photographer": {
        name: "摄影爱好者",
        icon: "fa-camera",
        category: "创作类",
        description: "发布5张原创照片即可获得此勋章，适合喜欢用镜头记录生活的用户。",
        requirements: [
          {text: "发布1张原创照片", completed: true},
          {text: "发布3张原创照片", completed: true},
          {text: "发布5张原创照片", completed: false}
        ],
        rewards: [
          {icon: "fa-star", text: "账号经验值 +300"},
          {icon: "fa-cloud-upload", text: "相册空间扩容"}
        ],
        earnedDate: "",
        unlocked: false,
        progress: "3/5"
      },
      "popular": {
        name: "人气之星",
        icon: "fa-star",
        category: "影响力类",
        description: "单条内容获得100个点赞即可解锁此勋章，代表您的内容受到社区用户的广泛认可。",
        requirements: [
          {text: "单条内容获得100个点赞", completed: false}
        ],
        rewards: [
          {icon: "fa-star", text: "账号经验值 +500"},
          {icon: "fa-trophy", text: "优质内容推荐机会"}
        ],
        earnedDate: "",
        unlocked: false,
        progress: "75/100"
      }
    };
    
    // 导航切换功能
    const tabItems = document.querySelectorAll('.tab-item');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除所有激活状态
        tabItems.forEach(i => i.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
        
        // 添加当前激活状态
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
        
        // 滚动到顶部
        window.scrollTo(0, 0);
      });
    });
    
    // 勋章详情弹窗
    const badgeDetailModal = document.getElementById('badgeDetail');
    const closeModal = document.getElementById('closeModal');
    const badgeItems = document.querySelectorAll('.badge-item');
    
    // 打开弹窗
    badgeItems.forEach(item => {
      item.addEventListener('click', function() {
        const badgeId = this.getAttribute('data-badge');
        const badge = badgeData[badgeId];
        
        if (badge) {
          // 更新弹窗内容
          document.getElementById('detailBadgeName').textContent = badge.name;
          document.getElementById('detailBadgeCategory').textContent = badge.category;
          document.getElementById('detailBadgeDesc').textContent = badge.description;
          
          // 更新图标
          const iconElement = document.querySelector('#detailBadgeIcon i');
          iconElement.className = `fa ${badge.icon}`;
          
          // 更新图标状态
          const iconContainer = document.getElementById('detailBadgeIcon');
          if (badge.unlocked) {
            iconContainer.className = 'detail-badge-icon unlocked';
          } else {
            iconContainer.className = 'detail-badge-icon locked';
          }
          
          // 更新获得条件
          const requirementsContainer = document.getElementById('detailRequirements');
          requirementsContainer.innerHTML = '';
          badge.requirements.forEach(req => {
            const reqItem = document.createElement('div');
            reqItem.className = 'requirement-item';
            
            const checkIcon = document.createElement('div');
            checkIcon.className = `requirement-check ${req.completed ? '' : 'unchecked'}`;
            checkIcon.innerHTML = req.completed ? '<i class="fa fa-check"></i>' : '<i class="fa fa-circle-o"></i>';
            
            const reqText = document.createElement('div');
            reqText.textContent = req.text;
            
            reqItem.appendChild(checkIcon);
            reqItem.appendChild(reqText);
            requirementsContainer.appendChild(reqItem);
          });
          
          // 更新奖励
          const rewardsContainer = document.getElementById('detailRewards');
          rewardsContainer.innerHTML = '';
          badge.rewards.forEach(reward => {
            const rewardItem = document.createElement('div');
            rewardItem.className = 'reward-item';
            rewardItem.innerHTML = `<i class="fa ${reward.icon}"></i><div>${reward.text}</div>`;
            rewardsContainer.appendChild(rewardItem);
          });
          
          // 更新获得日期
          const dateElement = document.getElementById('detailEarnedDate');
          if (badge.unlocked) {
            dateElement.textContent = `获得于: ${badge.earnedDate}`;
          } else {
            dateElement.textContent = `当前进度: ${badge.progress} 进行中`;
          }
          
          // 显示弹窗
          badgeDetailModal.classList.add('active');
        }
      });
    });
    
    // 关闭弹窗
    closeModal.addEventListener('click', function() {
      badgeDetailModal.classList.remove('active');
    });
    
    // 点击弹窗外部关闭
    badgeDetailModal.addEventListener('click', function(e) {
      if (e.target === badgeDetailModal) {
        badgeDetailModal.classList.remove('active');
      }
    });
  </script>
</body>
</html>